<template>
  <div id="userBox">
    <div id="userBox1">
      <div id="userBoxTop">
        <span class="iconfont icon-ren logo"></span>
        <span class="showEmail">{{ email }}</span>
      </div>
      <div id="userBoxBody">
        <div id="dateshow">
          <span>{{ week }}</span>
          <span>{{ date }}</span>
        </div>
        <router-link to="/personal">个人资料</router-link>
        <router-link to="/myOrder">我的订单</router-link>
        <router-link to="">会员中心</router-link>
        <router-link to="/myMoney">余额</router-link>
        <router-link to="">优惠卷</router-link>
        <router-link to="">现金卡</router-link>
        <router-link to="">红包</router-link>
        <router-link to="">积分</router-link>
      </div>
    </div>
    <div id="userBoxFoot">
      <span id="exit" @click="exit">退出登录</span>
      <span id="switch" @click="exit">切换账号</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      email: "",
      week: "",
      date: "",
    };
  },
  methods:{
      exit(){
          window.localStorage.removeItem("isLogin")
          this.$store.commit("changeLoginName","login")
          window.location.reload()
      }
  },
  mounted() {
    this.email = window.localStorage.getItem("email");
    this.week = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
    let date = new Date();
    this.date = `${date.getFullYear()}.${date.getMonth()+1}.${date.getDate()}`;
  },
};
</script>
<style lang="scss" scoped>
#userBox {
  position: absolute;
  top: 0;
  right: 0;
}
#userBox1 {
  width: 380px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px 30px;
}
#userBoxTop {
  display: flex;
  justify-content: space-between;
  .showEmail {
    font-size: 14px;
  }
  border-bottom: 1px solid rgb(179, 179, 179);
  padding-bottom: 15px;
}
#userBoxBody {
  a {
    margin-bottom: 10px;
    font-size: 20px;
    display: block;
    color: rgb(159, 159, 159);
    text-decoration: none;
    &:hover {
      color: black;
      font-weight: 600;
      cursor: pointer;
    }
  }
}
#dateshow {
  margin-bottom: 25px;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  span {
    font-size: 12px;
  }
}
#userBoxFoot {
  width: 100%;
  span {
    display: inline-block;
    width: 50%;
    text-align: center;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
  }
}
#exit {
  background-color: rgb(51, 51, 51);
  color: white;
}
#switch{
    background-color: rgb(255, 227, 42);
    color: black;
}
</style>